<template>
	<div class="main">
		<h3>登录</h3>
		<div class="phones" @click="getphone">
			<img class="phone-icon" :src="phone" alt="">
			<div class="phone-input">
				<span :class="['phone-Prefix','input-span-color-0']">+ 86 </span>
				<input type="tel" ref="phone" class="phone-dep" v-model="phoneNum"/>
			</div>
		</div>

		<div class="pwd" @click="getpwd">
			<img class="phone-icon-2" :src="lock" alt="">
			<div class="phone-input">
				<input type="password" style="width: 90%;" ref="pwd" v-model="pwd"/>
				<van-icon name="clear" size="16" color="#ccc" style="float:right;margin-top: 7px;" v-if="pwd.length>0" @click="pwd=''"/>
			</div>
		</div>

		<img class="loginBtn" :src="canToLogin?loginbtn:unloginbtn" alt="" @click="login">

		<div class="more">
			<span @click="JumpReg">立即注册</span>
			<span @click="JumpForget">忘记密码</span>
		</div>
	</div>
</template>

<script>
import {_ajaxlogin} from '../../service/main.js'
export default{
	data(){
		return{
			userName:"",
			phone:require('../../assets/img/phoneX3.png'),
			lock:require('../../assets/img/lockedX3.png'),

			canToLogin:false,
			unloginbtn:require('../../assets/img/loginUnActX3.png'),
			loginbtn:require('../../assets/img/loginActX3.png'),

			phoneNum:"",
			pwd:"",
		}
	},
	watch:{
		phoneNum (newValue, oldValue) {
			if (newValue > oldValue) {
				if (newValue.length === 4 || newValue.length === 9) {
					var pre = newValue.substring(0, newValue.length - 1)
					var last = newValue.substr(newValue.length - 1, 1)
					this.phoneNum = pre + ' ' + last
				} else {
					this.phoneNum = newValue
				}
			} else {
				if (newValue.length === 9 || newValue.length === 4) {
					this.phoneNum = this.phoneNum.trim()
				} else {
					this.phoneNum = newValue
				}
			}
			if(!this.validatephone(this.phoneNum)){
				this.canToLogin=false
			}else{
				if(this.pwd.trim().length>0){
					this.canToLogin=true
				}
			}
		},
		pwd(newValue){
			if(this.validatephone(this.phoneNum)){
				if(this.pwd.trim().length>0){
					this.canToLogin=true
				}else{
					this.canToLogin=false
				}
			}else{ this.canToLogin=false }
		}
	},
	created(){
		// localStorage.removeItem("user")
	},
	activated(){
		// localStorage.removeItem("user")
		this.phoneNum=""
		this.pwd=""
	},
	methods:{
		getphone(){
			this.$refs.phone.focus()
		},
		getpwd(){
			this.$refs.pwd.focus()
		},
		JumpReg(){
			this.$router.push("/reg")
		},

		JumpForget(){
			this.$router.push("/password/forget")
		},
		validatephone(val){
			let nub=val.replace(/\s*/g,"").replace("+86","")
			if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub))){ 
				return false; 
			} 
			return true
		},
		login(){
			let _this=this
			if(!this.canToLogin){return}
			if(!_this.validatephone(this.phoneNum)){
				_this.$toast("请输入正确的手机号")
			}
			let nub=_this.phoneNum.replace(/\s*/g,"").replace("+86","")
			_ajaxlogin({mobile:nub,password:_this.pwd}).then(res=>{
				if(res.errcode==1){
					res.data.MyLoginTime=new Date().getTime()

					localStorage.setItem("user",JSON.stringify(res.data))
					_this.$router.push("/indexs")
				}else{
					_this.$toast(res.message)
				}
			})
		}
	}	
}
</script>

<style scoped>
	.main{
		height: 100%;
		width: 100%;
		padding-top: 100px;
	}
	.main>h3{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: 1000;
		font-size: 27px;
		margin: 0 0 0 67px;
		color: #000;
		font-weight: blod;
	}
	.phones{
		width: 100%;
		height: 90px;
		margin-top: 38px;
		padding-top: 58px;
	}
	.pwd{
		width: 100%;
		height: 62px;
		padding-top: 24px;

	}
	.phone-icon{
		width: 12px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	.phone-icon-2{
		width: 14px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	input{
		background:none;  
		outline:none;  
		border:none;
		height: 30px;
		line-height: 30px;
		font-family: "DINPro-Bold";
		font-size: 16px;
		letter-spacing: .05rem;
		color: #000;
    	caret-color:#000;
	}
	.phone-input{
		display: inline-block;
		height: 34px;
		width: 205px;
		border-bottom: 1px solid #ccc;
	}
	.phone-dep{
		width: 70%;
	}
	.phone-Prefix{
		display: inline-block;
		font-family: "DINPro-Bold";
		font-size: 16px;
		margin-right: 4px;
		letter-spacing: .05rem;
	}
	.input-span-color-c{
		color: #ccc;
	}
	.input-span-color-0{
		color: #000;
	}
	::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}

	:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 16px;
		font-family: "DINPro-Bold";
		line-height: 33px;
	}  


	.loginBtn{
		display: block;
		width: 254px;
		margin: 40px auto 30px auto;
	}
	.more{
		width: 100%;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 13px;
		color: #ccc;
	}
	.more span:nth-child(1){
		display: inline-block;
		float: left;
		margin-left: 80px;
		clear: both;
	}
	.more span:nth-child(2){
		display: inline-block;
		float: right;
		margin-right: 80px;
	}
	
</style>
